'use strict';

import React from 'react';
import {View,Image,ScrollView,StatusBar,StyleSheet,Text,TouchableHighlight,Animated,RefreshControl,Easing,TabBar} from  'react-native';
import Utils from '../utils';
import  Icon from 'react-native-vector-icons/Ionicons';
import  styles from './styles';
import TabNavigator from 'react-native-tab-navigator';


const  AnimatedIcon = Animated.createAnimatedComponent(Icon);

class  Entrance extends  React.Component{
    static propTypes ={
            hideThis:React.PropTypes.func.isRequired
    };

    constructor(){
        super();
        this.state={
            transformAnim:new Animated.Value(1),
            opacityAnim:new Animated.Value(1),
        }
    }

    componentDidMount(){
        Animated.timing(
            this.state.transformAnim,{
                toValue:50,
                duration:1200,
                delay:2000,
                easing:Easing.elastic(2)
            },
        ).start();

        Animated.timing(
            this.state.opacityAnim,{
                toValue:0,
                duration:800,
                delay:2200,
                easing:Easing.elastic(1)
            },
        ).start();

        setTimeout(()=>{
            this.props.hideThis();
        },3300);
    }

    render(){
        return(
            <Animated.View style={[styles.entrance,{opacity:this.state.opacityAnim}]}>
                <AnimatedIcon size={80} style={[styles.twitter,{transform:[{scale:this.state.transformAnim}]}]} name="logo-twitter"></AnimatedIcon>
            </Animated.View>
        )
    }
}

class TwitterPost extends  React.Component{
    constructor(){
        super();
        this.state={
            isRefreshing:false
        };
    }
    _onRefresh(){
        this.setState({
            isRefreshing:true
        });
        setTimeout(()=>{
            this.setState({
                isRefreshing:false
            })
        },1000)
    }
    render(){
        return(
            <ScrollView style={styles.twitterPostContainer}
                        refreshControl={<RefreshControl refreshing={this.state.isRefreshing} onRefresh={()=>this._onRefresh()} tintColor='#ddd'></RefreshControl>}>
                <Image source={require('./img/tab.jpg')} style={{width:Utils.size.width,height:Utils.size.height-110}}></Image>
            </ScrollView>
        )
    }


}

class TwitterFlow extends React.Component{
    render(){
        return(
            <View >
                <View style={styles.nav}>
                    <View style={styles.navLeft}>
                        <Icon name="ios-person-add" size={23} style={{color:'#1b95e0' ,paddingLeft:10}}></Icon>
                    </View>
                    <View style={styles.navMid}>
                        <Icon name="logo-twitter" size={27} style={{color:'#1b95e0'}}></Icon>
                    </View>
                    <View style={styles.navRight}>
                        <Icon name="ios-search" size={23} style={{color:'#1b95e0' ,width:30}}></Icon>
                        <Icon name="ios-create-outline" size={23} style={{color:'#1b95e0' ,width:30,paddingRight:10}}></Icon>
                    </View>
                </View>
                <TwitterPost></TwitterPost>
            </View>
        )
    }
}

class TwitterTab extends React.Component{
    constructor(){
        super();
        this.state={
            selectedTab:'主页'
        }
    }

    changeTab(tabName){
        this.setState({
            selectedTab:tabName
        });
    }

    render(){
        return (<TabNavigator tabBarStyle={{backgroundColor:"#fff",marginTop:25,height:70,marginBottom:25,paddingBottom:25}} selectedTitleStyle={{color:'#1b95e0'}} >
                <TabNavigator.Item
                    renderIcon={() => <Icon name="ios-home-outline" size={20}></Icon>}
                    renderSelectedIcon={() => <Icon name="ios-home" size={20}></Icon>}
                    title="主页"
                    selected ={this.state.selectedTab==='主页'}
                    onPress={()=>this.changeTab('主页')}
                >
                    <TwitterFlow/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    renderIcon={() => <Icon name="ios-notifications-outline" size={20}></Icon>}
                    renderSelectedIcon={() => <Icon name="ios-notifications" size={20}></Icon>}
                    title="通知"
                    selected ={this.state.selectedTab==='通知'}
                    onPress={()=>this.changeTab('通知')}
                >
                <TwitterFlow/>
                </TabNavigator.Item>
            <TabNavigator.Item
                renderIcon={() => <Icon name="ios-mail-outline" size={20}></Icon>}
                renderSelectedIcon={() => <Icon name="ios-mail" size={20}></Icon>}
                title="私信"
                selected ={this.state.selectedTab==='私信'}
                onPress={()=>this.changeTab('私信')}
            >
                <TwitterFlow/>
            </TabNavigator.Item>
            <TabNavigator.Item
                renderIcon={() => <Icon name="ios-person-outline" size={20}></Icon>}
                renderSelectedIcon={() => <Icon name="ios-person" size={20}></Icon>}
                title="我"
                selected ={this.state.selectedTab==='我'}
                onPress={()=>this.changeTab('我')}
            >
                <TwitterFlow/>
            </TabNavigator.Item>
        </TabNavigator>);
    }
}

export  default class  extends React.Component{
    constructor(){
        super();
        this.state = {
            show:true
        };
    }
    _hideEntrance(){
        this.setState({
            show:false
        });
    }
    
    render(){
        let entrance = this.state.show ? <Entrance hideThis={()=>this._hideEntrance()}></Entrance>: <View></View>  
        
        return(
            <View style={styles.twitterContainer}>
                <TwitterTab/>
                {entrance}
            </View>
        )
    }
}